Dataview Integration

If you want to use this Plugin in combination with Plugins like Dataview, I recommend using the API. When this Plugin is enabled, you can render a Chart using the following:

window.renderChart(data, element);

There are some full Examples:

Get data from current page

test:: First Test
mark:: 6

```dataviewjs
const data = dv.current()

const chartData = {
    type: 'bar',
    data: {
        labels: [data.test],
        datasets: [{
            label: 'Grades',
            data: [data.mark],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 1
        }]
    }
}

window.renderChart(chartData, this.container);
```

or you can use with charts Codeblock

test:: First Test
mark:: 6

```dataviewjs
const data = dv.current()

dv.paragraph(`\`\`\`chart
    type: bar
    labels: [${data.test}]
    series:
    - title: Grades
      data: [${data.mark}]
\`\`\``)
```

Get data from multi-pages

```dataviewjs
const pages = dv.pages('#test')
const testNames = pages.map(p => p.file.name).values
const testMarks = pages.map(p => p.mark).values

const chartData = {
    type: 'bar',
    data: {
        labels: testNames,
        datasets: [{
            label: 'Mark',
            data: testMarks,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 1,
        }]
    }
}

window.renderChart(chartData, this.container)
```

The data is the standard Chart.js data payload, you can use everything it supports in there.

caution

You have to use dataviewjs for this!